<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  <link rel="stylesheet" href="/static/css/mini-nord.min.css">
  <link rel="stylesheet" href="/static/css/common.css">
  <link rel="stylesheet" href="/static/css/actionStyle.css">
  <title>manager</title>
  <style>
    
  </style>
</head>

<body>

  <div class="container">
    <div class="row">

      <div class="col-md-1 col-lg-2"></div>

      <div class="col-sm-12 col-md-10 col-lg-8">

        <div class="row bootstrap_top">
          <div class="col-sm-2 col-md-2 col-lg-2">
            <div class="bootstrap_top_left">
              <p>青丙拾光</p>
            </div>
          </div>
          <div class="col-sm-10 colh-md-10 col-lg-10">
            <div class="bootstrap_top_right">
              <div class="dropdown">
                <img src="/static/images/home.png" alt="">
                <div class="dropdown-content">
                  <a href="./">Home</a>
                  <a href="./user">HomePage</a>
                </div>
              </div>
              <div id="userinfo" class="userinfo user"></div>
            </div>
          </div>
        </div>

        <div class="row bootstrap_bottom">
          <div class="col-sm-2 col-md-2 col-lg-2 bootstrap_bottom_left">
						<div>管理</div>
						<details>
							<summary>信息管理</summary>
							<ul>
								<li>
									<img src="/static/images/lianjie.png" alt="">
									<a href="/userList">用户信息</a>
								</li>
								<li>
									<img src="/static/images/lianjie.png" alt="">
									<a href="/manager">管理员信息</a>
								</li>
							</ul>
						</details>
						<details>
							<summary>数据管理</summary>
							<ul>
								<li>
									<img src="/static/images/lianjie.png" alt="">
									<a href="/tips">小贴士</a>
								</li>
								<li>
									<img src="/static/images/lianjie.png" alt="">
									<a href="/guide">指南</a>
								</li>
								<li>
									<img src="/static/images/lianjie.png" alt="">
									<a href="/assort">食谱分类</a>
								</li>
								<li>
									<img src="/static/images/lianjie.png" alt="">
									<a href="/menu">食谱</a>
								</li>
							</ul>
						</details>
					</div>
          <div class="col-sm-10 colh-md-10 col-lg-10">
            <div class="bootstrap_bottom_right">
              <div class="search">
                <input type="search" id="sea" oninput="tableFilter()" name="keywords" placeholder="请输入关键词" />
              </div>
              <table>
                <thead>
                  <tr>
                    <th>管理员ID</th>
                    <th>管理员昵称</th>
                    <th>用户名</th>
                    <th>密码</th>
                  </tr>
                </thead>
                <tbody id="tb"></tbody>
              </table>
              <input type="checkbox" onclick="checkit(this.checked)" style="margin: 0; margin-left: 8px;">
              <span>显示密码</span>
            </div>
          </div>

        </div>

        <div class="col-md-1 col-lg-2"></div>

      </div>
    </div>

    <script>

      function getToken() {
        return localStorage.getItem('token') || ''
      }

      function getMyInfo() {
        let uinfo = localStorage.getItem('userinfo')
        if (uinfo) {
          try {
            return JSON.parse(uinfo)
          } catch (err) {
            return null
          }
        }
        return null
      }

      function checkLogin() {
        let tk = getToken()
        if (!tk) {
          location.href = '/login'
          return
        }

        let uinfo = getMyInfo()

        if (uinfo === null) {
          location.href = '/login'
        } else {
          //登录超时
          if (uinfo.time + uinfo.expires < Date.now()) {
            localStorage.removeItem('token')
            localStorage.removeItem('userinfo')
            location.href = '/login'
          }
        }
      }

      //检测是否登录并跳转
      checkLogin()

      function apicall(path, options = {}) {
        let token = getToken()
        let q = '?'
        if (path.indexOf('?') > 0) {
          q = '&'
        }
        path = `${path}${q}token=${token}`

        return fetch(path, options).then(async res => {

          if (!res.ok) {
            let errtext = await res.text()
            throw new Error(`${res.status} : ${errtext}`)
          } else {
            return res.text()
          }

        })

      }

      function getUserInfo(id) {

        return apicall('/user/info/' + id).then(d => {
          let uinfo = JSON.parse(d)
          showUserInfo(uinfo)
        })
          .catch(err => {
            alert(err.message)
          })

      }

      function showUserInfo(u) {
        let html = `
          ${u.nickname} [${u.id}]
          &nbsp;&nbsp;
          <a href="javascript:logout(this);">
            <img src="/static/images/back.png" alt="" style="width: 1.5rem;height: 1.5rem;filter: invert(100%); position: relative; top: 0.4rem;">
          </a>
        `
        document.getElementById('userinfo').innerHTML = html
      }

      function logout() {
        if (!confirm('确定退出？')) {
          return
        }
        localStorage.removeItem('token')
        localStorage.removeItem('userinfo')
        location.href = '/login'
      }

      //managerList
      var arr = ["wangjinghan777", "zhaomin111", "zhangchengcheng111","liangxiaohui111"]

      function getManagerList() {
        apicall('/user/info').then(d => {
          showManagers(JSON.parse(d))
        }).catch(err => {
          alert(err.message)
        })
      }

      function showManagers(ulist) {
        let html = ''
        for (let i = 0; i < ulist.length; i++) {
          html +=
            `
            <tr>
              <td>${ulist[i].id}</id>
              <td>${ulist[i].nickname}</td>
              <td>${ulist[i].nickname}</td>
              <td><input type='password' value="${arr[i]}" class="showPassword" style="margin:0;padding:0;width:100%;" disabled></td>
            </tr>
          `
        }
        document.getElementById('tb').innerHTML = html
      }

      function checkit(isChecked) {
        if (isChecked) {
          $(".showPassword").prop("type", 'text');
        } else {
          $(".showPassword").prop("type", 'password');
        }
      }

      //search
      function tableFilter() {
        var keyword = document.getElementById("sea").value.toLowerCase().split(" ");
        var table = document.getElementById("tb");
        var ele;
        for (var r = 0; r < table.rows.length; r++) {
          ele = table.rows[r].innerHTML;
          var displayStyle = 'none';
          for (var i = 0; i < keyword.length; i++) {
            if (keyword == "") { displayStyle = ""; break; }
            if (ele.toLowerCase().indexOf(keyword[i]) > 0) {
              displayStyle = '';
            } else {
              displayStyle = 'none';
              break;
            }
          }
          table.rows[r].style.display = displayStyle;
        }
      }

      window.onload = () => {
        getUserInfo('self')
        getManagerList()
      }
    </script>
</body>

</html>